import { useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { useStoreContext } from '../../context';
import AppleItem from '../AppleItem';
import './style.scss';

function Apple() {
  const { applesStore } = useStoreContext();
  const { freshApples, ateApples, picking, pickApple } = applesStore;
  const freshApplesWeight = freshApples.reduce((t, a) => t + a.weight, 0);
  const ateApplesWeight = ateApples.reduce((t, a) => t + a.weight, 0);

  useEffect(() => {
    pickApple();
  }, []);

  return (
    <div className="appleBusket">
      <div className="title">苹果篮子</div>
      <div className="stats">
        <div className="section">
          <div className="head">当前</div>
          <div className="content">
            {freshApples.length}个苹果，{freshApplesWeight}克
          </div>
        </div>
        <div className="section">
          <div className="head">已吃掉</div>
          <div className="content">
            {ateApples.length}个苹果，{ateApplesWeight}克
          </div>
        </div>
      </div>
      <div className="appleList">
        {
          freshApples.map(apple => <AppleItem key={apple.number} apple={apple} />)
        }
      </div>
      <div className="btn-div">
        <button
          disabled={picking ? 'disabled' : ''}
          className={picking ? 'disabled' : ''}
          onClick={pickApple}
        >
          { picking ? '采摘中...' : '摘苹果' }
        </button>
      </div>
    </div>
  );
}

export default observer(Apple);
